<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: white;
		padding: 30rpx 0;
	}

	.list {
		padding: 25rpx;
		border-bottom: 1px solid #ccc;
		align-items: flex-start;
		color: #737373;

		.red {
			transform: translateY(6rpx);
		}

		.textarea {
			width: 460rpx;
			height: 120rpx;
			font-size: 28rpx;
		}

		.mic {
			height: 120rpx;
			width: 80rpx;
			border-left: 1px solid #ccc;
			padding-left: 20rpx;
		}

		.ipt {
			width: 550rpx;
		}

		.uploadfile {
			width: 550rpx;

			.btns {
				width: 100%;

				.btn {
					width: 152rpx;
					height: 64rpx;

					border: 2rpx solid #bfbfbf;
					border-radius: 34rpx;
				}
			}
		}

		.record {
			width: 550rpx;
		}
	}
</style>

<template>
	<view class="content">
		<view class="f34 bold" style="padding:0 30rpx;border-bottom: 1px solid #ccc;padding-bottom: 20rpx;">转交</view>
		<view class="list between-flex f28">
			<view class="align-flex">
				转交原因
			</view>
			<picker mode="selector" :range="dic.transReason" range-key="name"
				@change="choose($event,1,dic.transReason)">
				<view class="align-flex blue choosearea">
					{{reason?reason.name:'请选择'}}
					<u-icon name="arrow-right" color="#409EFF" size="28"></u-icon>
				</view>
			</picker>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex">
				转交至
			</view>
			<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index"
				:range="array" range-key="name">
				<view class="align-flex blue choosearea">
					{{user?user.userName:'请选择工程师或运维小组'}}
					<u-icon name="arrow-right" color="#409EFF" size="28"></u-icon>
				</view>

			</picker>
		</view>

		<view class="list between-flex f28">
			<view class="align-flex">
				处理时间
			</view>
			<view class="align-flex " style="width: 550rpx;">
				{{date}}
			</view>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex">
				处理人
			</view>
			<view class="align-flex " style="width: 550rpx;">
				{{username}}
			</view>
		</view>
		<view class="list between-flex f28">
			<view class="align-flex">
				详细说明
			</view>
			<view class="align-flex ">
				<textarea style="width:550rpx;" class="textarea" v-model="remark" maxlength="-1"
					placeholder="请填写转交说明" />

			</view>
		</view>
		<view class="lbtn" @click="submit">转交</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderNum: {
				default: ''
			}
		},
		data() {
			return {
				head: this.$head,
				date: '',
				username: '',
				dic: uni.getStorageSync('dic'),
				reason: null,
				remark: '',
				array: [
					[],
					[]
				],
				childArr: [],
				user: null

			}
		},
		created() {
			this.date = this.$getDate()
			this.username = uni.getStorageSync('username')

			var team = uni.getStorageSync('team')

			this.array[0] = team

			this.childArr = team.map((item) => item.children)
			// 第一次打开时，默认给一级分类添加它的二级分类
			this.array[1] = this.childArr[0]
			console.log(this.array)
			console.log(this.childArr)

		},

		methods: {
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					this.array[1] = []
					this.$forceUpdate()
					setTimeout(() => {
						this.$set(this.array, 1, this.childArr[e.detail.value])

					}, 200)


				}

			},

			// 选择任务分类
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let value = e.target.value;
				let index = value[1]
				this.user = this.array[1][index]
				console.log(this.user)
			},

			choose(e, type, list) {

				switch (type) {
					case 1:
						this.reason = list[e.detail.value];
						break;
					case 2:
						this.user = list[e.detail.value];
						break;

				}

			},
			submit() {
				if (!this.reason) {
					this.$msg('请选择转交原因')
					return
				}
				if (!this.user) {
					this.$msg('请选择工程师或运维小组')
					return
				}

				uni.showLoading({
					title: '提交中...'
				})
				var obj = {
					orderNum: this.orderNum,
					remark: this.remark,
					processValue: this.reason.value,

				}
				if (this.user.hasOwnProperty('userId')) {
					obj.sendUser = this.user.userId
				} else {
					obj.sendTeam = this.user.teamId
				}
				console.log(obj)
				
				this.$pop.ajaxPost('/wechat/order/redirect', obj).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.$msg('转交成功')
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1000)

					}
				})
			},


		}
	}
</script>
